// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts')
// 引入柱状图
require('echarts/lib/chart/bar')
require('echarts/lib/chart/line')
require('echarts/lib/chart/pie')
// 引入提示框和标题组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/legend')
require('echarts/lib/component/grid')

export default class EchartsConfig {
  private myChart: any
  private option = {
    title: {
      text: '',
      subtext: '',
      x: 'left'
    },
    color: ['#2FC25B', '#1890FF', '#FACC14'],
    tooltip: {
      trigger: 'item'
      // backgroundColor: 'rgba(0,0,250,0.2)'
    },
    // legend: {
    //   type: 'scroll', //就这一个属性 设置legend滚动轴的出现
    //   show: true,
    //   bottom: 24,
    //   x: 'center',
    //   data: ['一', '二', '三'],
    //   textStyle: {
    //     fontSize: 14
    //   },
    //   selectedMode: true,
    //   orient: 'horizontal',
    //   icon: 'circle'
    // },
    radar: {
      indicator: [
        { text: '负责水平', max: 10 },
        { text: '还款意愿', max: 10 },
        { text: '稳定性', max: 10 },
        { text: '多头借贷', max: 10 },
        { text: '资产收入水平', max: 10 }
      ],
      center: ['50%', '40%'],
      splitNumber: 3,
      radius: 60,
      splitLine: {
        show: true,
        lineStyle: {
          width: 1,
          color: 'rgba(131,141,158,.1)' // 设置网格的颜色
        }
      }
    },
    series: [
      {
        radius: '80%',
        type: 'radar',
        symbol: 'circle',
        lineStyle: {
          width: 1
        },
        emphasis: {
          areaStyle: {
            color: 'rgba(0,250,0,0.3)'
          }
        },
        data: [
          {
            value: [
              Math.ceil(10 * Math.random()),
              Math.ceil(10 * Math.random()),
              Math.ceil(10 * Math.random()),
              Math.ceil(10 * Math.random()),
              Math.ceil(10 * Math.random())
            ],
            name: ''
          }
        ]
      }
    ]
  }

  constructor(domId: string) {
    this.myChart = echarts.init(document.getElementById(domId))
  }
  public setOption(config: any) {
    // this.option.title.subtext = config.name
    this.myChart && this.myChart.setOption(this.option)
  }
}
